<template>
  <div class="user__info__wrap">
    <el-popover
      v-if="userInfo"
      v-model="visible"
      popper-class="avatar-container hover-effect"
      placement="bottom-end"
      width="280"
    >
      <div class="card__user__info">
        <div class="user__hd">
          <div class="user_logo">
            <img src="../../../assets/images/avatar.png" alt />
          </div>
          <div class="user_info">
            <div class="end">
              <h5>{{ userInfo.userName }}</h5>
              <!-- <span>{{ userInfo.roles && userInfo.roles.length ? userInfo.roles[0].name : '游客' }}</span> -->
            </div>
            <p>工号：{{ userInfo.sn }}</p>
          </div>
        </div>
        <ul class="user__list">
          <li>
            <label for="userName">姓名：</label>
            {{ userInfo.userName }}
          </li>
          <li>
            <label for="sn">工号：</label>
            {{ userInfo.sn }}
          </li>
          <li>
            <label for="phoneNum">手机：</label>
            {{ userInfo.phoneNum }}
          </li>
          <li>
            <label for="phoneNum">邮箱：</label>
            {{ userInfo.email }}
          </li>
        </ul>
        <div class="btn-bottom">
          <span @click="handleChangePassword">修改密码</span>
          <span @click="handleLogout">退出登录</span>
        </div>
      </div>
      <div slot="reference" class="head__btn">
        <div class="user_hd">
          <img src="../../../assets/images/avatar.png" alt />
        </div>
        <span class="user__name">{{ userInfo.userName }}</span>
      </div>
    </el-popover>
    <el-dialog
      append-to-body
      title="修改密码"
      :visible.sync="dialogVisible"
      width="450px"
      @close="close"
    >
      <div v-if="userInfo" class="form">
        <el-form
          ref="form"
          :model="ruleForm"
          label-position="right"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="登录账号:">
            {{ userInfo.sn }}
          </el-form-item>
          <el-form-item prop="oldPassword" label="原密码:">
            <el-input
              v-model="ruleForm.oldPassword"
              auto-complete="new-password"
              type="password"
              placeholder="请输入原密码"
            />
          </el-form-item>
          <el-form-item prop="newPassword" label="新密码:">
            <el-input
              v-model="ruleForm.newPassword"
              auto-complete="new-password"
              type="password"
              placeholder="请输入新密码"
            />
          </el-form-item>
          <el-form-item prop="password" label="确认密码:">
            <el-input
              v-model="ruleForm.password"
              auto-complete="new-password"
              type="password"
              placeholder="请再次输入密码"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          :disabled="loading"
          type="primary"
          :loading="loading"
          @click="okClick"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'

const { mapGetters, mapActions } = createNamespacedHelpers('user')
export default {
  name: 'UserInfoPopover',
  data() {
    const password = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请再次输入密码'))
      } else {
        if (value != this.ruleForm.newPassword) {
          return callback(new Error('两次密码输入不一致'))
        } else {
          callback()
        }
      }
    }
    return {
      visible: false,
      dialogVisible: false,
      ruleForm: {
        oldPassword: null,
        newPassword: null,
        password: null
      },
      loading: false,
      rules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ],
        password: [{ required: true, validator: password, trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'sn'])
  },
  created() {
    this.fetchUserInfoBySn(this.sn)
  },
  methods: {
    ...mapActions(['fetchUserInfoBySn', 'logout']),
    handleChangePassword() {
      this.visible = false
      this.dialogVisible = true
    },
    handleLogout() {
      this.logout()
    },
    close() {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    okClick() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.loading = true
          let params = {
            newPassword: this.ruleForm.newPassword,
            newPasswordAgain: this.ruleForm.password,
            oldPassword: this.ruleForm.oldPassword,
            sn: this.userInfo.sn
          }
          let res = await this.$store.dispatch(
            'user/fetchChangePassword',
            params
          )
          this.loading = false
          if (!res) return
          this.close()
          this.$message({
            type: 'success',
            message: '密码修改成功'
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less">
.avatar-container {
  padding: 0 !important;
  .popper__arrow {
    border-bottom-color: #128593 !important;
    &::after {
      border-bottom-color: #128593 !important;
    }
  }
}
</style>
<style lang="less" scoped>
.card__user__info {
  .user__hd {
    display: flex;
    height: 101px;
    padding: 30px;
    box-sizing: border-box;
    width: 100%;
    background: url('~@assets/images/pic_personal_bg.png') no-repeat;
    .user_logo {
      width: 44px;
      height: 44px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .user_info {
      margin-left: 10px;
      p {
        color: rgba(250, 255, 255, 0.63);
        margin: 0;
      }
      .end {
        display: flex;
        h5 {
          width: 150px;
          font-size: 18px;
          color: #fff;
          margin: 0;
          // margin-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span {
          font-size: 12px;
          color: #fff;
          padding: 5px 7px;
          background: rgba(255, 255, 255, 0.16);
          border-radius: 20px;
        }
      }
    }
  }
  .user__list {
    padding: 15px 20px;
    border-bottom: 1px solid #e3e3e3;
    margin: 0;
    li {
      display: flex;
      font-size: 14px;
      color: #40424d;
      line-height: 28px;
      label {
        text-align: right;
        color: #757780;
        font-size: 14px;
        font-weight: normal;
      }
    }
  }
  .btn-bottom {
    display: flex;
    padding: 8px 10px;
    span {
      cursor: pointer;
      padding: 0;
      color: #2e3381;
      font-size: 14px;
      padding: 8px 10px;
      &:first-child {
        position: relative;
        margin-right: 10px;
        &::after {
          position: absolute;
          right: -10px;
          top: 50%;
          transform: translateY(-50%);
          content: ' ';
          width: 2px;
          height: 14px;
          background: #e5e6eb;
        }
      }
      &:last-child {
        margin-left: 10px;
      }
      &:hover {
        background: #f3f3f8;
      }
    }
  }
}
.user__info__wrap {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 20px;

  .user__name {
    font-size: 14px;
    box-sizing: border-box;
    height: 24px;
    line-height: 24px;
    border-radius: 20px;
    margin-left: 6px;
    color: #757780;
  }
}
.head__btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  .user_hd {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  img {
    width: 50px;
    height: 50px;
  }
}

.avatar-wrapper {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  .user-avatar {
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 10px;
  }

  .el-icon-caret-bottom {
    cursor: pointer;
    position: absolute;
    right: -20px;
    top: 25px;
    font-size: 12px;
  }
}
.user__info {
  .head__btn {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  span {
    padding-left: 8px;
    font-size: 16px;
    color: #000;
  }
}
</style>
